<template>
  <div class="hzs-question-container">
    <el-row type="flex">
      <el-col :xs="24" :sm="24" :md="18">

        <!-- 左侧内容-->
        <div class="article-left">
          <el-card>
            <!-- 标题 -->
            <div class="article-title">
              <h1>{{ data.title }}</h1>
              <div class="article-count">
                <nuxt-link :to="'/user/' + data.userId" target="_blank" class="nickname">
                  <i class="el-icon-user-solid"></i> {{ data.nickName }}
                </nuxt-link>
                <span>
                  <i class="el-icon-date"></i> {{ getDateFormat(data.updateDate) }}
                  <i class="el-icon-thumb"></i> {{ data.thumhup }}
                  <i class="el-icon-view"></i> {{ data.viewCount }}
                </span>

                <!-- 只能自己编辑自己的 -->
                <nuxt-link
                  v-if="this.$store.state.userInfo && $store.state.userInfo.uid === data.userId"
                  :to="{path:'/question/edit', query:{id: data.id} }" class="nickname">
                  &nbsp;&nbsp; 编辑
                </nuxt-link>

              </div>
              <!-- 加 style="margin: 5px;" 不然会紧密连接在一起 -->
              <el-tag
                style="margin: 5px;"
                v-for="item in data.labelList"
                :key="item.id"
                size="small"> {{ item.name }}
              </el-tag>
            </div>

            <!-- 内容 -->
            <div class="article-content">
              <!-- 1. 加上样式，2 使用 v-html 渲染 -->
              <article class="markdown-body" v-html="data.htmlContent"></article>
            </div>

            <!-- 点赞按钮-->
            <el-button
              :disabled="!$store.state.userInfo"
              @click="handleThumb()"
              :plain="!isThumb"
              type="primary"
              icon="el-icon-thumb"
              size="medium">{{ thumbText }}
            </el-button>
          </el-card>

          <!--精彩回答-->
          <div class="hzs-question-answers">
            <h2>精彩回答</h2>
            <el-card v-if="!commentList || commentList.length===0">
              暂无回答
            </el-card>
            <!-- 每个回答，是一个card -->
            <el-card v-else v-for="comment in commentList" :key="comment.id">
              <mxg-comment :showComment="false" :commentList="[comment]"
                           :userId="userId" :userImage="userImage"
                           :authorId="data.userId"
                           @doChildSend="doChildSend" @doRemove="doRemove">
              </mxg-comment>
            </el-card>
          </div>

          <!-- 编写回答 -->
          <div class="hzs-question-write-answer">
<!--            <h2>编写回答</h2>-->
            <el-card v-if="!$store.state.userInfo">
              <h4>登录后参与交流、获取后续更新提醒</h4>
              <div>
                <el-button @click="$store.dispatch('LoginPage')" type="primary" size="small">登录</el-button>
                <el-button @click="$store.dispatch('LoginPage')" type="primary" size="small" plain>注册</el-button>
              </div>
            </el-card>
            <!-- markdown编辑器，提交回答内容 -->
            <div v-else>
              <!--
                  ref 就是唯一标识，相关于id
                  v-model 绑定的markdown输入 框的内容
              -->
              <mavon-editor :autofocus="false" ref="md" v-model="mdContent" @change="getMdHtml"
                            @imgAdd="uploadContentImg" @imgDel="delConentImg"
              />
              <el-row style="margin-top: 20px" type="flex" justify="center">
                <el-button type="primary" @click="submitReplay">
                  提交问答
                </el-button>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧-->
      <el-col class="hidden-sm-and-down" :md="6">
        <el-row>
          <el-col>
            <!-- 固钉距离 80px -->
            <mxg-affix :offset="80">
              <div class="article-right">
                <!-- parentClass 指定文章内容的父元素class值 -->
                <mxg-directory parentClass="article-content"></mxg-directory>
              </div>
            </mxg-affix>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 高度显示样式
import '@/assets/css/md/github-markdown.css'
import '@/assets/css/md/github-min.css'

// 固钉
import MxgAffix from '@/components/common/Affix'

// 生成文章导航目录
import MxgDirectory from '@/components/common/Directory'

// 评论组件 ++++++++++++++
import MxgComment from '@/components/common/Comment'

// 处理数据显示格式
import {dateFormat} from '@/utils/date.js'


export default {
  // 校验路由参数
  validate({params}) {
    // 必须是number类型
    return /^\d+$/.test(params.id)
  },

  // 标题信息
  head() {
    return {
      title: `${this.data.title}-问答-${this.data.firstTitle}`
    }
  },

  components: {MxgAffix, MxgDirectory, MxgComment},

  // 获取数据
  async asyncData({params, app}) {
    // 1. 查询问题详情
    const {data} = await app.$getQuestionById(params.id)
    // console.log("data")
    // console.log(data)

    // 2. 更新问题浏览数
    const isView = app.$cookies.get(`question-view-${params.id}`)
    // console.log(isView)

    if (!isView) {
      // 没有值 ，可以更新浏览数
      let code = 0;
      try{
        const res = await app.$updateQuestionViewCount(params.id)
        code = res['code']
      }catch(err){
        // console.log(err)
        code = 0;
      }

      // console.log(code)

      if (code === 20000) {
        // 将此问题浏览数+1
        data.viewCount++
        // 保存cookie中, 关闭浏览器后会被删除
        app.$cookies.set(`question-view-${params.id}`, true)
      }
    }

    // console.log("commentList")

    // let commentList;
    // // 通过问题id查询所有回答列表信息
    // try{
    //   const {data: commentList} = await app.$getReplayByQuestionById(params.id)
    // }catch (e) {
    //   console.log(e)
    //   commentList = []
    // }
    const {data: commentList} = await app.$getReplayByQuestionById(params.id)
    // console.log(commentList)

    return {data, commentList}
  },

  // 2. 声明一个方法，引用 date.js
  methods: {
    // 处理点赞
    async handleThumb() {
      // 点击后取反，
      this.isThumb = !this.isThumb
      // 1 点赞，-1 取消赞
      const count = this.isThumb ? 1 : -1
      // 当前文章id
      const questionId = this.$route.params.id

      // 更新点赞数
      const {code} = await this.$updateQuestionThumb(questionId, count)
      if (code === 20000) {
        // 更新页面显示点赞数
        this.data.thumhup = this.data.thumhup + count
        // 保存到cookie中，注意是 this.$cookies
        this.$cookies.set(`question-thumb-${this.$route.params.id}`, this.isThumb, {
          maxAge: 60 * 60 * 24 * 365 * 2 // 保存2年
        })
      }
    },

    // 发布评论
    // 提交评论：评论内容，文章ID，登录用户信息（用户id，用户头像，用户昵称，用户头像）
    doSend(content) {
      console.log(`针对文章ID=${this.$route.params.id}发布评论内容：${content}`)
      this.doChildSend(content)
    },

    // 发布回复评论触发
    // 回复评论：父评论ID，评论内容，文章ID，登录用户信息（用户id，用户头像，用户昵称，用户头像）
    // 发布回复评论触发, parentId不传默认为-1,
    // ++++ htmlContent 和 mdContent
    doChildSend(htmlContent, parentId = -1, mdContent) {
      // 提交回复评论：父评论ID，评论内容，文章ID，登录用户信息（用户id，用户头像，用户昵称，用户头像）
      console.log(`对父评论ID=${parentId} 发布的回复评论内容：${htmlContent}`)
      const data = {
        htmlContent, // ++++++++++
        mdContent, // +++++++++++
        parentId,
        questionId: this.$route.params.id, //+++
        userId: this.userId,
        userImage: this.userImage,
        nickName: this.$store.state.userInfo && this.$store.state.userInfo.nickName,
      }
      // 提交
      this.$addReplay(data).then(response => {
        //刷新评论 update
        this.refreshReplay()
      })
    },

    // 获取评论 ++++
    async refreshReplay() {
      // getReplayByQuestionById
      // const {data} = await this.$getReplayByQuestionId(this.$route.params.id)
      const {data} = await this.$getReplayByQuestionById(this.$route.params.id)

      // if(code === '20000'){
      //   this.$message.success({
      //     message: "更新评论成功",
      //     duration: 2000,
      //   })
      // }
      this.commentList = data
      this.mdContent = ''
    },

    // 删除评论
    async doRemove(id) {
      console.log(`删除评论id${id}`)
      const {code} = await this.$deleteReplayById(id)
      if (code === 20000) {
        this.refreshReplay() // ++++++
      }
    },

    // 获取格式化数据
    getDateFormat(date) {
      return dateFormat(date)
    },

    // 获取问答输入框的内容
    getMdHtml(mdContent, htmlContent) {
      this.mdContent = mdContent
      this.htmlContent = htmlContent
    },

    // 上传回答内容图片（图片位置编号，File对象）
    uploadContentImg(pos, file) {
      // 封装表单数据
      const fd = new FormData()
      fd.append('file', file)

      this.$uploadImg(fd).then(response => {
        if (response.code === 20000) {
          // 上传成功，回显，
          this.$refs.md.$img2Url(pos, response.data)
        }
      })
    },

    // 删除回答内容图片
    delConentImg(urlAndFileArr) {
      const fileUrl = urlAndFileArr[0] //图片url
      const file = urlAndFileArr[1] //File对象
      // 删除内容图片
      this.$deleteImg(fileUrl)
    },

    // 提交回答
    submitReplay() {
      if (this.htmlContent) {
        // 发送回答信息
        this.doChildSend(this.htmlContent, -1, this.mdContent)
      } else {
        this.$message.error('请输入回答内容')
      }
    }
  },
  data() {
    return {
      mdContent: '',
      htmlContent: '',

      // 是否已点赞
      // 是否已点赞 改为 question +++++
      isThumb: this.$cookies.get(`question-thumb-${this.$route.params.id}`)
        ? this.$cookies.get(`question-thumb-${this.$route.params.id}`) : false,

      // 当前登录用户id
      userId: this.$store.state.userInfo && this.$store.state.userInfo.uid,

      // 当前登录用户头像，
      userImage: this.$store.state.userInfo && this.$store.state.userInfo.imageUrl
    }
  },
  computed: {
    thumbText: function () {
      return this.isThumb ? '取消点赞' : '点赞';
    }
  },


}
</script>

<style>
@import '~@/assets/css/blog/article.css'; /* 不要少了分号 */

/*.hzs-question-container{*/
/*  background-color: rgba(255,255,255, 0.9);*/
/*}*/

.hzs-question-container h2{
  text-align: center;
  background-color: #FFFFFF;
}

.hzs-question-answers{
  background-color: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 10px black;
}


.hzs-question-write-answer{
  margin-top: 20px;
  background-color: white;
  padding: 20px 0 20px;
  margin-bottom: 100px;
  border-radius: 15px;
  box-shadow: 0 0 10px black;
}

.hzs-question-write-answer:hover{
  box-shadow: 0 0 30px black;
}


</style>
